<template>
  <div class="main">
    <scroll-view class="scroll-view" scroll-x="true">
      <div :key="index" v-for="(item, index) in optimization" class="item" @click="goodsDateil(item.id)">
        <img :src="item.list_pic_url">
        <h1>{{item.name}}</h1>
        <p>{{item.goods_brief}}</p>
        <span>￥{{item.retail_price}}</span>
      </div>
      <div class="last-item item">
        <div class="last">查看全部</div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
export default {
  props: ['optimization'],
  methods: {
    goodsDateil (id) {
      wx.navigateTo({
        url: `/pages/goodsDateil/main?id=${id}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main{
  background: #fff;
  .scroll-view {
    width: 100%;
    white-space: nowrap;
    .item {
      width: 280rpx;
      height: 416rpx;
      margin: 5rpx 0 5rpx 25rpx;
      display: inline-block;
      background: #fff;
      img {
        width: 280rpx;
        height: 280rpx;
      }
      h1 {
        font-size: 30rpx;
        font-weight: bold;
      }
      p{
        color: #8a8a8a;
        font-size: 24rpx;
      }
      span {
        color: #9c3232;
        font-size: 24rpx;
        display: block;
      }
      h1,p,span {
        width: 94%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 8rpx;
        text-indent: 1em;
      }
    }
    .item:nth-child(n+2) {
      border-left: 1rpx solid #f4f4f4;
    }
    .last-item{
      vertical-align: top;
      .last{
        width: 280rpx;
        height: 280rpx;
        text-align: center;
        line-height: 280rpx;
      }
    }
  }
}
</style>
